<template>
    <!-- 个人信息 -->
    <div class="information">
        <form ref="form" :model="form" method="post" enctype="multipart/form-data">
            昵称:<input type="text" name="userName" v-model="form.name" ><br>
            年龄:<input type="text" name="age" v-model="form.age" ><br>
            电话:<input type="text" name="phone" v-model="form.phone" ><br>
            账号:<input type="text" name="account" v-model="form.account" ><br>
            密码:<input type="password" name="password" v-model="form.password" ><br>
            性别:<select name="gender" v-model="form.gender">
                <option value="男" label="男"></option>
                <option value="女" label="女"></option>
            </select><br>
            <span>上传头像</span>
            <input type="file" name="ImgUrl">
            <input type="button" value="保存" @click="onSubmit">
        </form>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {
            form: {
                name: '',
                age: "",
                phone: "",
                account: "",
                password: "",
                gender: "",
            },
            imageUrl: ''
        }
    },
    components: {
    },
    computed: {
        ...mapState("user", ["user"])
    },
    methods: {
        ...mapMutations("user", ["userDel"]),
        onSubmit: function () {
            const avatar = new FormData(this.$refs.form)
            avatar.append("userID",this.user.userID)
            this.axios({
                method:"post",
                url:"/api/users/personalCenterRedact",
                data:avatar
            }).then(res=>{
                if(res.data.code == 200){

                }
                console.log(res.data);
            }).catch(err=>{
                console.log("发送数据失败");
            })
        }
    },
    mounted: function () {
        this.axios({
            url:"/api/users/personalCenter",
            params:{
                userID:this.user.userID
            }
        }).then(res=>{
            console.log(res.data.data.results[0]);
            let data = res.data.data.results[0]
            this.form.name = data.userName
            this.form.age = data.age
            this.form.gender = data.gender
            this.form.phone = data.phone
            this.form.password = data.password
            this.form.account = data.account
        }).catch(err=>{
            console.log("用户数据失败");
        })
    }
};
</script>

<style>
.information {
    width: 80%;
    margin: 20px auto;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>